<template>
    <div class="BagLogout">
        <!--       公共顶部-->
        <Top>
            <p class="title" slot="midPart">书包</p>
            <i
               v-if="inApp()"
               class="el-icon-arrow-left back"
               slot="leftPart"
               @click="appBack()"></i>
        </Top>
        <!--中间内容部分-->
        <div class="main">
            <cube-scroll>
                <!--头部-->
                <div class="bagHead">
                    <!--波浪动画-->
                    <div class="wave"></div>
                    <div class="wave wave2"></div>
                    <!--编辑-->
                    <router-link tag="div" class="edit" to="/login"> <i class="el-icon-edit"></i>完善资料</router-link>
                    <!--底部信息-->
                    <ul class="head-bottom clearfix">
                        <li>
                            <p>0</p>
                            <p>关注</p>
                        </li>
                        <li>
                            <p>0</p>
                            <p>花粉</p>
                        </li>
                    </ul>
                    <!--头像-->
                    <div class="userImg" @click="$router.push('/login')"><img class="imgFull" src="/static/user.png" alt=""></div>
                    <!--用户名-->
                    <p class="userName" @click="$router.push('/login')">点击登录</p>
                </div>
                <!--导航菜单-->
                <ul class="bag-nav clearfix">
                    <li @click="appUpload">
                        <svg class="icon child-1" aria-hidden="true">
                            <use xlink:href="#icon-shangchuan1"></use>
                        </svg>
                        <p>课程上传</p>
                    </li>
                    <router-link tag="li" to="/login">
                        <svg class="icon child-2" aria-hidden="true">
                            <use xlink:href="#icon-lishisousuo"></use>
                        </svg>
                        <p>观看历史</p>
                    </router-link>
                    <!--已购-->
                    <router-link tag="li" to="/login">
                        <svg class="icon child-3" aria-hidden="true">
                            <use xlink:href="#icon-liebiao"></use>
                        </svg>
                        <p>已购</p>
                    </router-link>
                    <!--<router-link tag="li" to="/learn/order" v-else>
<svg class="icon child-3" aria-hidden="true">
<use xlink:href="#icon-liebiao"></use>
</svg>
<p>已购</p>
</router-link>-->
                    <!---->
                    <router-link tag="li" to="/login">
                        <svg class="icon child-4" aria-hidden="true">
                            <use xlink:href="#icon-shouchang"></use>
                        </svg>
                        <p>收藏</p>
                    </router-link>
                </ul>
                <!--功能列表-->
                <ul class="mutils">
                    <!--我的花瓣-->
                    <router-link to="/login" tag="li">
                        <svg class="icon child-flower" aria-hidden="true">
                            <use xlink:href="#icon-flower_circle"></use>
                        </svg>
                        <span>我的花瓣</span>
                        <p class="balance"><b>0</b>花瓣</p>
                        <i class="el-icon-arrow-right arrowR"></i>
                    </router-link>
                    <!-- v-if="!is_fake" -->
                    <!--<router-link to="/bag/myFlower" tag="li" v-else>
<svg class="icon child-flower" aria-hidden="true">
<use xlink:href="#icon-flower_circle"></use>
</svg>
<span>我的花瓣</span>
<p class="balance"><b>{{infos.member_amount}}</b>花瓣</p>
<i class="el-icon-arrow-right arrowR"></i>
</router-link>-->
                    <!---->
                    <router-link to="/login" tag="li">
                        <svg class="icon child-1" aria-hidden="true">
                            <use xlink:href="#icon-moneybag"></use>
                        </svg>
                        <span>我的收入<font v-if="deviceType===2">(点击提现)</font></span>
                        <p class="balance"><b class="money-count"><span style="font-size:.26rem">￥</span>0</b></p>
                        <i class="el-icon-arrow-right arrowR"></i>
                    </router-link> 
                    <router-link to="/login" tag="li">
                        <svg class="icon child-comment" aria-hidden="true">
                            <use xlink:href="#icon-iconfontpinglun"></use>
                        </svg>
                        <span>评论</span>
                        <b class="point"></b>
                    </router-link>
                    <router-link to="/login" tag="li">
                        <svg class="icon child-praise" aria-hidden="true">
                            <use xlink:href="#icon-dianzan"></use>
                        </svg>
                        <span>点赞</span>
                        <b class="point"></b>
                    </router-link>
                    <!--<router-link @click="tips()" to="" tag="li">
<svg class="icon child-2" aria-hidden="true">
<use xlink:href="#icon-share"></use>
</svg>
<span>分享</span>
<i class="el-icon-arrow-right arrowR"></i>
</router-link>-->
                    <!--<router-link to="/bag/level" tag="li">
<svg class="icon child-test" aria-hidden="true">
<use xlink:href="#icon-icon-kaoshijilu"></use>
</svg>
<span>花艺等级</span>
<i class="el-icon-arrow-right arrowR"></i>
</router-link>-->
                    <router-link to="/bag/help" tag="li">
                        <svg class="icon child-3" aria-hidden="true">
                            <use xlink:href="#icon-3202bangzhu"></use>
                        </svg>
                        <span>帮助</span>
                        <i class="el-icon-arrow-right arrowR"></i>
                    </router-link>
                    <router-link to="/bag/about" tag="li">
                        <svg class="icon child-4" aria-hidden="true">
                            <use xlink:href="#icon-about"></use>
                        </svg>
                        <span>关于</span>
                        <i class="el-icon-arrow-right arrowR"></i>
                    </router-link>
                </ul>
            </cube-scroll>
        </div>
        <!--        底部导航-->
        <Tabbar :data="{index:4}"></Tabbar>
    </div>
</template>

<script>
    //导入相关组件
    import Top from '@/components/smallCom/Top'
    import Tabbar from '@/components/smallCom/Tabbar'
    export default {
        name: 'BagLogout',
        components: {
            Top,//顶部信息组件
            Tabbar,//底部导航组件
        },
        data () {
            return {
                loading:false,//加载动画
                infos:{},//临时用户信息
                is_fake:false,//是否临时用户
            }
        },
        created(){
            let loginState = JSON.parse(window.localStorage.getItem('userInfo'))
            //判断用户信息存在与否 且是否来自app
            if(loginState){//用户信息存在
                this.$router.push('/bag')
                /*if(loginState.is_ios && loginState.is_ios===1){
                    this.loading = true;
                    this.Posthttp('/?method=flower.user.center',{member_id:this.getMemberId()},(res)=>{
                        this.loading = false;
                        if(JSON.parse(res.bodyText).status ===1){
                            this.infos = JSON.parse(res.bodyText).data.member
                            this.is_fake = true
                        }else{
                            this.$message.warning(JSON.parse(res.bodyText).msg)
                        }
                    })

                }else{
                    this.$router.push('/bag')
                    this.is_fake = false
                }*/

            }else{//用户信息不存在时
                this.$router.push('/bagLogout')
                this.is_fake = false
            }
        },
        methods:{
            //app的课程上传
            appUpload(){
                if(this.deviceType()=== 1){//安卓
                    window.hy.showVideoListUI();
                }else if(this.deviceType() === 2){//IOS
                    window.webkit.messageHandlers.hyShowVideoListUI.postMessage(null)
                }else{
                    this.$router.push('/bag/upguid')
                }
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .BagLogout {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        background-color: #f2f2f2;
        .bagHead{
            position: relative;
            width: 100%;
            height: 4.8rem;
            background-color:#3bada3;
            background-image:linear-gradient(0deg, #f46250, #fe794c);
            padding-top: .3rem;
            color: #fff;
            text-align: center;
            overflow: hidden;
            /*底部信息栏*/
            .head-bottom{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 1rem;
                /*                background-color: rgba(0,0,0,.05);*/
                li{
                    position: relative;
                    width: 50%;
                    height: 100%;
                    float: left;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    font-size: .24rem;
                    line-height: .34rem;
                    color: #f46250;
                    font-weight: 600;
                    &:first-child::after{
                        content: '';
                        display: block;
                        width: 1px;
                        height: 60%;
                        background-color: #f46250;
                        position: absolute;
                        right: 0;
                        top: calc(50% - 30%);
                    }
                }
            }
            /*编辑*/
            .edit{
                opacity: .8;
                position: absolute;
                right: .2rem;
                top: .3rem;
                i{
                    margin-right: .1rem;
                    font-size: .28rem;
                }
            }
            /*用户头像*/
            .userImg{
                width: 1.46rem;
                height: 1.46rem;
                border-radius: 100%;
                overflow: hidden;
                margin: 0 auto ;
            }
            /*用户名*/
            .userName{
                font-size: .3rem;
                margin-top: .6rem;
            }
            /*用户等级*/
            .userLevel{
                font-size: .22rem;
                margin-top: .1rem;
            }
        }
        /*菜单*/
        .bag-nav{
            background-color: #fff;
            li{
                width: 25%;
                float: left;
                border-right: 1px solid #e4e4e4;
                text-align: center;
                line-height: .46rem;
                padding: .3rem 0 .2rem;
                color: #333;
                &:last-child{
                    border-right: 0;
                }
                .icon{
                    font-size: .4rem;
                }
                .child-1{color: #c8b910;}
                .child-2{color: #6a80c6;}
                .child-3{color: #18bd8c;}
                .child-4{color: #e55827;}
            }
        }
        /*功能列表*/
        .mutils{
            background-color: #fff;
            margin-top: .2rem;
            padding-bottom: .9rem;
            li{
                position: relative;
                font-size: .26rem;
                color: #666;
                padding-left: .2rem;
                height: .9rem;
                line-height: .9rem;
                border-bottom: 1px solid #e4e4e4;
                .icon{
                    font-size: .35rem;
                    margin-right: .1rem;
                    vertical-align: -.08rem;
                }
                .arrowR{
                    position: absolute;
                    font-size: .3rem;
                    right: .2rem;
                    top: calc(50% - .15rem);
                }
                .point{
                    position: absolute;
                    right: .3rem;
                    top: calc(50% - .1rem);
                    width: .2rem;
                    height: .2rem;
                    border-radius: 100%;
                    background-color: #e7460f;
                }
                .balance{
                    height: 100%;
                    position: absolute;
                    right: .6rem;
                    top: 0;
                    b{
                        font-size: .36rem;
                        color: #d54053;
                        vertical-align: -.048rem;
                        margin-right: .04rem;
                        &.money-count{
                            color: #e7460f;
                        }
                    }
                }
                .child-1{color: #d67620;}
                .child-2{color: #1bc256;}
                .child-3{color: #e13863;}
                .child-4{color: #8737e2;}
                .child-5{color: #e7460f;}
                .child-comment{color: #00a1dd;}
                .child-praise{color: #e55827;}
                .child-test{color: #1bc256;}
                .child-flower{color: #d54053;}
            }
        }
    }

    /*波浪动画*/
    .wave {
        position:absolute;
        bottom:0;
        left:0;
        opacity:0.5;
        width:5000px;
        height:1.8rem;
        background:url('../../assets/wave.png') 0 0 repeat-x;
        animation:wave1 13s linear infinite alternate;
    }
    .wave2 {
        left: -1rem;
        opacity: 0.3;
        animation: wave2 13s linear infinite alternate;
    }

    @keyframes wave1 {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-3500px);
        }
    }

    @keyframes wave2 {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-4000px);
        }
    }
</style>
